<template>
<div id="orderDetalis">
  <!--支付状态-->
  <div class="orderCondition">{{orderCondition}}</div>
  <!--店铺信息-->
  <div class="mallInfo">
    <img src="https://tse2-mm.cn.bing.net/th/id/OIP.rtIGR-vBNmdIvk5FaZIcngHaHa?w=185&h=185&c=7&o=5&pid=1.7" alt="">
    <div class="mallMsg">
      <p class="mallInfohead">
        <span class="mallName">{{mallName}}</span>
        <span class="mallTel">{{mallTel}}</span>
      </p>
      <p class="mallAddress">{{mallAddress}}</p>
    </div>
  </div>
  <!--商品详情-->
  <div class="box-good">
    <div class="box-good-img">
      <img src="https://tse1-mm.cn.bing.net/th/id/OIP.rppnj1d5ufwYOIQFh7-10wHaHa?w=180&h=185&c=7&o=5&pid=1.7" alt="">
    </div>
    <div class="box-text">
      <!--head-->
      <div class="box-goodinfo">
        <span class="positionTitle">[{{positionTitle}}]</span>
        <span class="showinfo">{{showinfo}}</span>
      </div>
      <div class="box-price">
        <span class="goodprice">
          ￥{{goodprice}}
        </span>
        <span class="spec-num">x {{specNum}}</span>
      </div>
      <!--button-->

    </div>
    <button class="lookDetails">查看团详情</button>

  </div>
  <van-row class="pay">
    <span class="money">实付：￥{{Mymoney}}</span>
  </van-row>
  <!--联系卖家-->
  <van-row type="flex" justify="space-around" class="contact">
    <van-col span="12" class="chat">
      <van-row type="flex" justify="space-around">
        <van-col span="14" >
          <van-icon name="chat-o" size="30" />
          <span>联系卖家</span>
        </van-col>
      </van-row>
    </van-col>
    <van-col span="12" class="call" @click="tel">
      <van-row type="flex" justify="space-around">
        <van-col span="14">
          <van-icon name="service-o" size="30" />
          <span>拨打电话</span>
        </van-col>

      </van-row>
    </van-col>
  </van-row>
  <!--订单信息-->
  <div class="orderInfo">
    <p>订单编号：{{orderNum}}</p>
    <p>支付方式：{{wayToPay}}</p>
    <p>下单时间：{{orderTime}}</p>
  </div>
</div>
</template>

<script>
    export default {
        name: "orderDetalis",
      data(){
          return{
            orderCondition:'待支付',
            mallName:'拼团公社自营店',
            mallTel:'820-8208820',
            mallAddress:'深圳市西乡村地铁站汇一城18号商铺',
            positionTitle: '仅限深圳同城包邮',
            showinfo: '新鲜水果上市 大荔冬枣 5斤/箱',
            goodprice:'75.00',
            specNum:3,
            Mymoney:2333,
            orderNum:'233333333',
            wayToPay:'支付宝支付',
            orderTime:'2017-06-12 09:15:24'
          }
      },
      methods:{
        tel(){
          this.$dialog.confirm({
            // title: "hello",
            message: "您确定拨打电话0755-581024吗？",
            confirmButtonText: "确定", //改变确认按钮上显示的文字
            cancelButtonText: "取消" //改变取消按钮上显示的文字
          }).then(()=> {
            console.log("已拨打")
          }).catch(() => {
            console.log("取消拨打")
          })
        },
      },
      computed: {}
    }



</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  #orderDetalis{
  }
  .orderCondition{
    width: 100%;
    height: 80px;
    line-height: 80px;
    background-color: cadetblue;
    color: white;
    font-size: 26px;
    font-weight: bold;
    padding-left: 20px;
    font-family: 华文彩云;
  }
  .mallInfo{
    width: 100%;
    height: 60px;
    padding-left: 20px;
  }
  .mallInfo img{
    width: 32px;
    height: 32px;
    margin-top: 14px;
    margin-right: 5px;
  }
  .mallMsg{
    height: 60px;
    width: calc(100% - 37px);
    float: right;
    margin-top: 8px;
  }
  .mallInfohead span{
    font-size: 14px;
    padding-right: 10px;
    font-weight: 300;
    color: #3b3a3a;
  }
  .mallAddress{

    font-size: 14px;
    font-weight: 300;
    color: #3b3a3a;
  }
  .box-good{
    width: 100%;
    height: 150px;
    background-color: #eae9e9;
    padding-left: 20px;
    /*margin-top: 10px;*/
    overflow: hidden;
  }
  .box-good-img{
    width: 100px;
    height: 100px;
    margin-top: 25px;
    float: left;
    margin-right: 10px;
  }

  .box-good-img img{
    width: 100px;
    height: 100px;
    object-fit: cover;
  }
  .box-text{
    float: left;
    width: calc(100% - 130px);
    /*border-bottom: 1px solid #a5a1a1;*/
  }
  .box-goodinfo{
    font-size: 14px;
    margin-top: 25px;
    width: calc(100% - 70px);
    float: left;
  }
  .positionTitle {
    font-weight: bold;
  }
  .box-price{
    float: right;
    width: 50px;
    margin-top: 25px;
    height: 20px;
    display: table;
    margin-right: 5px;
  }
  .goodprice{
    font-weight: bold;
    margin-bottom: 30px;
    display: table;
  }
  .spec-num{
    width: 50px;
    padding-left: 30px;
    font-size: 10pt;
    font-weight: 300;
    text-align: right;
  }
  /*button{*/
  /*  height: 30px;*/
  /*  margin: 10px 25px 5px 5px;*/
  /*  color: #3b3a3a;*/
  /*  font-size: 13px;*/
  /*  padding:  0 5px;*/
  /*  border-radius: 15px;*/
  /*  outline: none;*/
  /*  float: right;*/
  /*}*/
  /*button:active{*/
  /*  outline: none;*/
  /*  */
  /*}*/

  button {
    height: 25px;
    line-height: 25px;
    margin: 25px 23px 5px 5px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: 0 1px white inset;
    color: #4e4e4e;
    font-size: 13px;
    padding: 0 5px;
    border-radius: 15px;
    outline: none;
    /*text-shadow: 0 1px 1px black;*/
    float: right;
  }

  button:active {

    box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;

    border-color: rgba(0, 0, 0, .3);

  }
  .pay{
    height: 30px;
    width: 100%;
    line-height: 30px;
    text-align: right;
    color: #383636;
    border-bottom: 1px solid #a5a1a1;
    /*background-color: #eae9e9;*/
  }
  .money{
    font-weight: 300;
    font-size: 15px;
    color: #3b3a3a;
  }
  .contact{
    height: 40px;
    background-color: white;
    border-bottom: 1px solid silver;
  }
  .chat,
  .call{
    height:  40px;
    padding-top: 5px;
    margin: 0 auto;

  }
  .chat{
    border-right: 1px solid silver;
  }
  .contact span{
    height: 30px;
    line-height: 30px;
    font-weight: 300;
    margin: 0 auto;
    display: inline-block;
    font-size: 14px;
    color: #3b3a3a;
    letter-spacing: 1px;
  }
  .orderInfo{
    padding-left: 20px;
    height: 70px;
    /*background-color: pink;*/
    margin-top: 20px;

    font-size: 14px;
    color: #3b3a3a;
  }
</style>
